<template>
    <search-table
		:columns="listCol" 
        :data="remarkList"
		:total="remarkList.length"
	>
    <template slot="search">
        <Button type="primary" ghost icon="md-add" @click="openremark"  style="margin-top:10px"><span>点评</span></Button>
    </template>
    <!-- <div>
        <div>
             <Button type="primary" ghost icon="md-add" @click="openremark"  style="margin-top:10px"><span>点评</span></Button>
        </div>
        <Table :columns="listCol" :data="remarkList" style="margin-top:10px"></Table>
    </div> -->
    <Modal v-model="modal" width="600" :title="title"  :footer-hide="true"   :mask-closable="false" @on-visible-change="watchModalStatus">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            
            <FormItem label="团队" prop="team" >
                <!-- <Select filterable v-model="groupFormValidate.partyId" placeholder="请选择势力方" filterable 
                    @on-open-change="uncheck"
                    :disabled="accessGroupModal.type == 'modify'">
                    <Option :value="party.id.toString()" :title="party.name" :disabled="party.disable || party.name === '管理员势力方'" 
                        :label="party.name" v-for="party in partyList" :key="party.id">
                        <span>{{party.name}}</span>
                        <span :style="{float:'right',padding:'6px',backgroundColor:'rgba('+party.red+','+party.green+','+party.blue+','+party.alpha+')'}"></span>
                    </Option>
                </Select> -->
                <Select filterable v-model="formValidate.team" placeholder="请选择团队" @on-change="getidAndName" :disabled="madaltype==2">
                        <Option :value="value.id+'@'+value.name" v-for="(value,index) in accessGroupList" :key="index"    :title="value.name">{{value.name}}</Option>
                </Select>
            </FormItem>
           <FormItem label="点评内容" prop="remark">
                 <Input v-model.trim="formValidate.remark" type="textarea" :maxlength="1000" :autosize="{minRows: 3,maxRows: 5}" placeholder="请输入点评内容"></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="confirmRemark()" >确定</Button>
                <Button @click="handleReset()" style="margin-left: 8px">取消</Button>
            </FormItem>
        </Form>
    </Modal>
    </search-table>
</template>

<script>
import {addRemark,getRemarkList, deleteRemark,updateRemark} from '@/api/drill_compete'
import {getaccessgrouplist} from '@/api/access_new'
export default {
    props:['projectId','testid'],
     components:{},
     data(){
         return{
            remarkList:[],
            accessGroupList:[],
            queryGroupInfo:{
                pageIndex:1,
                pageSize:999,
                testId:this.testid
            },
            modal:false,
            formValidate:{
                remark:'',
                sceneId:this.testid,
                team:'',
                projectId:this.projectId,
                teamId:'',
                teamName:'',
                id:'',
            },
            title:'新增点评',
            madaltype:1,
            listCol:[
                {
                    key: 'teamName',
                    title:'团队名称',
                    placement:'top-left',
                    order:1,
                    width: 240,
                    tooltip:true
                },
                {
                    title: '点评内容',
                    key: 'remark',
                    tooltip:true,
                    // render: (h, params) => {
                    //         return h('Tooltip', {
                    //             props: {
                    //                 'max-width': '300',
                    //                 transfer: true
                    //             },
                    //             style: {
                    //                 width: '100%',
                    //             }
                    //         }, [
                    //             h('p', {
                    //                 style: {
                    //                     overflow: 'hidden',
                    //                     'text-overflow': 'ellipsis'
                    //                 }
                    //             }, params.row.remark),
                    //             h('div', {
                    //                 slot: 'content',
                    //                 style: {
                    //                     'white-apace': 'normal',
                    //                     'word-break': 'break-all'
                    //                 }
                    //             }, params.row.remark)
                    //         ])
                    //     }
                },
                {
                    title:'操作',
                    key:'action',
                    placement:'top-right',
                    opList:[
                        {
                            txt:'修改',
                            on:{
                                click:(data)=>{//4
                                    this.modal=true
                                    this.title='修改点评'
                                    this.formValidate.teamId=data.teamId
                                    this.formValidate.teamName=data.teamName
                                    this.formValidate.team=data.teamId+'@'+data.teamName
                                    this.formValidate.remark=data.remark
                                    this.formValidate.id=data.id
                                    this.madaltype=2
                                }
                            }
                        },
                        {
                            txt:'删除',
                            type:'delete',
                            title: '你确定要删除吗',
                            tooltip:true,
                            on:{
                                click:(data)=>{//4
                                    this.deleteRemark(data.id)
                                }
                            }
                        }
                    ],
                    // render:(h,params) => {
                    //     return h('div',[
                    //         h('Button',{
                    //         props:{
                    //             type:'primary',
                    //             size:'small',
                    //         },
                    //         style:{
                    //             marginRight:'5px',
                    //             display:'inline-block'
                    //         },
                    //         on:{
                    //             click:()=>{//4
                    //                 this.modal=true
                    //                 this.title='修改点评'
                    //                 this.formValidate.teamId=params.row.teamId
                    //                 this.formValidate.teamName=params.row.teamName
                    //                 this.formValidate.team=params.row.teamId+'@'+params.row.teamName
                    //                 this.formValidate.remark=params.row.remark
                    //                 this.formValidate.id=params.row.id
                    //                 this.madaltype=2
                    //             }
                    //         }
                    //         },'修改'),
                    //         h('Poptip', {
                    //                 props: {
                    //                     confirm: true,
                    //                     type: 'error',
                    //                     size: 'large',
                    //                     title: '你确定要删除吗',
                    //                     transfer:true
                    //                 },
                    //                 on: {
                    //                     'on-ok': () => {
                    //                         this.deleteRemark(params.row.id)
                    //                     }
                    //                 }
                    //             }, [
                    //                 h('Button', {
                    //                     props: {
                    //                         type: 'error',
                    //                         size: 'small',
                    //                     },
                    //                     style: {
                    //                         marginRight: '5px'
                    //                     },
                    //                 }, '删除')
                    //             ]),
                    //     ])
                    // }
                },
            ],
            ruleValidate:{
                team: [
                    { required: true, message: '团队不能为空', trigger: 'change' }
                ],
                remark:[
                        { required: true, message: '点评内容不能为空', trigger: 'change' },
                    { max: 200, message: '点评内容长度不能超过1000个字符', trigger: 'change' },
                ],
            },
         }
     },
     mounted(){
         this.getRemarkList()
         this.getAccessGroupList()
     },
     methods:{
         deleteRemark(id){
             deleteRemark([id]).then(res=>{
                 if(res.code==1){
                     this.$Message.success('删除成功')
                     this.getRemarkList()
                 }else{
                     this.$Message.warning(res.message)
                 }
             })
         },
         getidAndName(val){
             console.log(val);
             if(val) {
                if(val.includes('@')) {
                    this.formValidate.teamId=val.split('@')[0]
                    this.formValidate.teamName=val.split('@')[1]
                } 
            }
         },
        getRemarkList(){
            console.log(this.testid,'this.testidthis.testid');
            getRemarkList(this.testid,this.projectId).then(res=>{
                if(res.code==1  ){
                    this.remarkList=res.data
                }else{
                    this.$Message.warning(res.message)
                }
            })
        },
        getAccessGroupList(){
            if(!this.testid){
                return;
            }
            getaccessgrouplist(Object.assign(this.queryGroupInfo
            )).then(data => {
                if(data.code == 1){
                    this.accessGroupList = data.data.items;
                    console.log(this.accessGroupList ,'this.accessGroupList this.accessGroupList ');
                }else if(data.code == -2) {
                    this.accessGroupList = [];
                }else{
                    this.$Message.warning(data.message);
                }
            })
        },
        openremark(){
            this.modal=true
            this.title='新增点评'
            this.madaltype=1
            this.formValidate={
                 remark:'',
                sceneId:this.testid,
                team:'',
                projectId:this.projectId,
                teamId:'',
                teamName:'',
                id:'',
            }
        },
        confirmRemark(){
            if(this.madaltype==1){
                this.addremark()
            }else{
                this.updateRemark()
            }
        },
        updateRemark(){
            this.$refs['formValidate'].validate((valid) =>{
                    if(valid){
                        delete this.formValidate.team
                        updateRemark(this.formValidate).then(res=>{
                            if(res.code==1){
                                this.$Message.success('更新点评成功')
                                this.handleReset()
                                this.getRemarkList()
                            }else{
                                this.$Message.warning(res.message)
                            }
                        })
                    }else{
                        this.$Message.error('请完善信息！');
                    }
             })
        },
        addremark(){
             this.$refs['formValidate'].validate((valid) =>{
                    if(valid){
                        delete this.formValidate.team
                        delete this.formValidate.id
                        addRemark(this.formValidate).then(res=>{
                            if(res.code==1){
                                this.$Message.success('点评成功')
                                this.handleReset()
                                this.getRemarkList()
                            }else{
                                this.$Message.warning(res.message)
                            }
                        })
                    }else{
                        this.$Message.error('请完善信息！');
                    }
             })
        },
        handleReset(){
            this.$refs['formValidate'].resetFields();
            this.modal=false
            // this.formValidate.teamId=''
            // this.formValidate.remark=''
            // this.formValidate.team=''
            // this.formValidate.teamName=''
            this.madaltype=1
        },
        watchModalStatus (val) {
            if (!val) {
                this.handleReset()
            }
        },
     }
}
</script>

<style>

</style>